<template>
  <div class="list" ref="wrapper">
    <div >
        <div class="area">
            <div class="title">当前城市</div>
            <ul class="btn-list">
              <li class="btn-wrapper"><div class="btn">{{this.$store.state.city}}</div></li>
            </ul>
        </div>
        <div class="area">
          <div class="title">热门城市</div>
          <ul class="btn-list">
            <li class="btn-wrapper" v-for="item in hotcity"
                :key="item.id"
                @click="handCityClick(item.name)"
            ><div class="btn">{{item.name}}</div></li>
          </ul>
        </div>
          <div class="area"
               v-for="(item,key) in cityList"
              :key="key"
               :ref="key"
          >
          <div class="title" >{{key}}</div>
          <ul class="list-add">
            <li v-for="city in item"
                :key="city.id"
                @click="handCityClick(city.name)"
            >{{city.name}}</li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
  //引入scroll
   import Bscroll from 'better-scroll'
    export default {
        name: "List",
      props:{
        hotcity:Array,
        cityList:Object,
        letter:String//接收传递过来的字母
      },
      mounted(){
          this.scroll = new Bscroll(this.$refs.wrapper);
      },
      methods:{
        handCityClick(city){
          this.$store.dispatch("changeCity",city)
          this.$router.push('/')
        }
      },
      watch:{
          letter(){//监听letter的变化
            if(this.letter){//判断不为空的时候
              const  element = this.$refs[this.letter][0];
              this.scroll.scrollToElement(element)//跳转到置顶scroll位置
            }
              // console.log(this.letter)
          }
      }
    }
</script>

<style lang="stylus" scoped>
    .list {
      overflow: hidden;
      position: absolute;
      top: .76rem;
      left: 0;
      right: 0;
      bottom 0;
      .area {
        .title {
          height: .3rem;
          background #eeeeee;
          border-bottom: 1px solid #cccccc;
          padding-left: .1rem;
          line-height: .3rem;
          color: #666;
        }
        .btn-list {
          overflow: hidden;
          padding: .05rem .3rem .05rem .05rem;
          box-sizing: border-box;
          .btn-wrapper {
            width: 33.3%;
            float: left;
            .btn {
              text-align: center;
              margin: .05rem;
              border: 1px solid #ccc;
              border-radius: .03rem;
              padding: .05rem 0;
            }
          }
        }
        .list-add {
          line-height: .3rem;
          li {
            border-bottom: 1px solid #cccccc;
            padding-left: .1rem;
          }
        }
      }
    }
</style>
